<template>
    <div class="work2">
        <div class="shopping-car">
            <div class="background-img"></div>
            <div class="title">
                <img src="@/icons/svg/shopping-car.svg" alt="" style="width: 14px; height: 14px;">
                / 购物车
            </div>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange" :cell-style="rowStyle">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column label="图片" width="120" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.photo" alt="" style="width: 100px; height: 100px;">
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="单价" width="120" align="center">
                </el-table-column>
                <el-table-column label="个数" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="reduceNum(scope.$index, tableData)" size="small">
                            -
                        </el-button>

                        <span class="Num">{{ scope.row.num }}</span>

                        <el-button @click.native.prevent="addNum(scope.$index, tableData)" size="small">
                            +
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="sum" label="小计" width="120" align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="danger" size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom-box" style="margin-top: 20px">
                总价 : ￥ <span class="TotalNum">{{ totalSum }}</span>
                &nbsp; &nbsp;
                <el-button>
                    结算({{ totalNum }})
                </el-button>
            </div>
        </div>
    </div>
</template>
<script>
// import { reduce } from 'core-js/core/array';

export default {
    data() {
        return {
            tableData: [
                {
                    photo: "https://img14.360buyimg.com/n7/jfs/t1/255548/27/27773/212064/67cfbeacFcfee2552/5d6c294408159ebc.png",
                    price: 15,
                    num: 0,
                    sum: 0
                },
                {
                    photo: "https://img13.360buyimg.com/n7/jfs/t1/272548/31/8388/92771/67df4610F5a289846/dd11f3055216feb1.jpg.avif",
                    price: 12,
                    num: 0,
                    sum: 0
                },
                {
                    photo: "https://img11.360buyimg.com/n2/jfs/t1/163255/17/49358/91693/670636a7Fbe56995e/db4ccba6a1944b4b.jpg",
                    price: 20,
                    num: 0,
                    sum: 0
                },
                {
                    photo: "https://img14.360buyimg.com/n2/jfs/t1/233393/5/23917/100147/66a3923eF0ce4b3fe/76d10bc97e616344.jpg",
                    price: 18,
                    num: 0,
                    sum: 0
                },
                {
                    photo: "https://img10.360buyimg.com/n7/jfs/t1/224927/33/23064/128753/66b441adFf57218f4/4b51db900ac07684.jpg.avif",
                    price: 30,
                    num: 0,
                    sum: 0
                },
            ],
            multipleSelection: [],
            // 应该用watch写
            totalNum: 0,
            totalSum: 0,

        }
    },
    watch:{
        multipleSelection:{
            immediate:true,
            deep:true,
            handler(e){
                this.totalNum = 0;
                this.totalSum = 0;
                for(let i = 0;i<e.length;i++){
                    this.totalNum += e[i].num;
                    this.totalSum += e[i].sum;
                }
            }
        }

    },
    methods: {
        //   toggleSelection(rows) {
        //     if (rows) {
        //       rows.forEach(row => {
        //         this.$refs.multipleTable.toggleRowSelection(row);
        //       });
        //     } else {
        //       this.$refs.multipleTable.clearSelection();
        //     }
        //   },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            // console.log(this.multipleSelection[0].name);
        },
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        addNum(index, rows) {
            // rows.splice(index, 1);
            rows[index].num++;
            rows[index].sum = rows[index].num * rows[index].price;
        },
        reduceNum(index, rows) {
            // rows.splice(index, 1);
            if (rows[index].num > 0) {
                rows[index].num--;
                rows[index].sum = rows[index].num * rows[index].price;
            }

        },
        rowStyle() {
            return "text-align:center";
        },

    }
}
</script>
<style scoped>
.shopping-car {
    width: 720px;
}

.background-img {
    width: 720px;
    height: 240px;
    background: url('../assets/1.png') no-repeat;
}

.title {
    width: 700px;
    height: 20px;
    /* background-color: aqua; */
    font-size: 12px;
    display: flex;
    align-items: center;
    padding-left: 20px;

}

.bottom-box {
    display: flex;
    justify-content: end;
    align-items: center;
}
.TotalNum{
    color: blueviolet;
    font-size: 30px;
    font-weight: 600;
}
</style>
